<template>
	<div class="app-container certificate-management">
		<el-steps :active="active" simple process-status="finish" finish-status="success">
			<el-step>
				<template #title>
					<span class="step-name">密钥参数配置</span>
				</template>
				<template #icon>
					<div class="round" :class="[roundClass1]">1</div>
				</template>
			</el-step>

			<el-step>
				<template #title>
					<span class="step-name">申请文件制作</span>
				</template>
				<template #icon>
					<div class="round" :class="[roundClass2]">2</div>
				</template>
			</el-step>

			<el-step>
				<template #title>
					<span class="step-name">申请文件下载</span>
				</template>
				<template #icon>
					<div class="round" :class="[roundClass3]">3</div>
				</template>
			</el-step>

			<el-step>
				<template #title>
					<span class="step-name">公钥证书上传</span>
				</template>
				<template #icon>
					<div class="round" :class="[roundClass4]">4</div>
				</template>
			</el-step>
		</el-steps>

		<div style="height: 10px"></div>

		<el-row :gutter="10">
			<el-col :span="24">
				<step1 v-if="active == 0" @confirm="step1Confirm" />
				<step2 v-else-if="active == 1" @cancel="step2Cancel" @confirm="step2Confirm" />
				<step3 v-else-if="active == 2" @cancel="step3Cancel" @confirm="step3Confirm" />
				<step4 v-else-if="active == 3" @cancel="step4Cancel" @confirm="step4Confirm" />
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import step1 from './components/step-1.vue'
import step2 from './components/step-2.vue'
import step3 from './components/step-3.vue'
import step4 from './components/step-4.vue'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

// 当前步骤
const active = computed(() => {
	return Number(route.query.active) || 0
})

// 流程id
const flowId = computed(() => {
	return Number(route.query.id) || null
})

// 记录号
const num = computed(() => {
	return route.query.num || 0
})

// 失效日期
const date = computed(() => {
	return route.query.date || 0
})

const roundClass1 = computed(() => {
	return {
		'round-active': active.value == 0,
		'round-finish': active.value > 0
	}
})

const roundClass2 = computed(() => {
	return {
		'round-active': active.value == 1,
		'round-finish': active.value > 1
	}
})

const roundClass3 = computed(() => {
	return {
		'round-active': active.value == 2,
		'round-finish': active.value > 2
	}
})

const roundClass4 = computed(() => {
	return {
		'round-active': active.value == 3,
		'round-finish': active.value > 4
	}
})

// 步骤1
function step1Confirm(data) {
	changeRoute({
		id: data.id,
		back: data.back,
		active: 1
	})
}

// 步骤2
function step2Cancel() {
	changeRoute({
		id: flowId.value,
		active: 0,
		back: 1
	})
}
function step2Confirm(data) {
	changeRoute({
		id: flowId.value,
		active: 2,
		num: data.requestNum,
		date: data.date
	})
}

// 步骤3
function step3Cancel() {
	changeRoute({
		id: flowId.value,
		active: 1,
		back: 1,
		num: num.value,
		date: date.value
	})
}
function step3Confirm() {
	changeRoute({
		id: flowId.value,
		active: 3,
		num: num.value,
		date: date.value
	})
}

// 步骤4
function step4Cancel() {
	changeRoute({
		id: flowId.value,
		active: 2,
		back: 1,
		num: num.value,
		date: date.value
	})
}
function step4Confirm() {
	proxy.$tab.closeOpenPage('/qrCode/certificateManagement')
}

/**
 * @param id 生成的id
 * @param active 当前步骤
 * @param back 是否查询记录 1是 0否
 * @param num 记录号
 * @param date 失效日期
 */
function changeRoute(data) {
	const { id, active, back = 0, num = 0, date = 0 } = data
	const query = JSON.parse(JSON.stringify(route.query))
	query.id = id
	query.active = active
	query.back = back
	query.num = num
	query.date = date
	router.replace({ name: 'CertificateManagementEdit', query })
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.step-name {
  font-size: 15px;
}

.certificate-management {
	:deep(.el-steps--simple) {
		background: transparent;
	}

	:deep(.el-step.is-simple .el-step__icon) {
		width: 50px !important;
		height: 50px !important;
		font-size: 16px !important;
	}
}

.round {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #8e8e8e;
	color: #fff;
}

.round-active {
	background-color: $--color-primary;
}

.round-finish {
	background-color: var(--el-color-success);
}
</style>
